<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
         /* 
                全不选按钮
            */
        window.onload=function(){
        var items=document.getElementById("items");
        var checkedNoBtn=document.getElementById("checkedNobtn");
            checkedNoBtn.onclick=function(){
                //设置四个多选框变成不选中状态
                for(var i=0;i<items.length;i++){
                    //通过多选框的checked属性可以来获取或设置多选框的选中状态
                    //alert(items[i].checked);
                    //设置四个多选框变成选中状态
                    items[i].checked=false;
                }
            };

           
        }
    </script>
</head>
<body>
    <form action="" method="post">
        你爱好的运动是？<input type="checkbox" id="checkedAllBox">全选/全不选
        <br/>
        <input type="checkbox" name="items"  value="足球">足球
        <input type="checkbox" name="items"  value="篮球">篮球
        <input type="checkbox" name="items"  value="羽毛球">羽毛球
        <input type="checkbox" name="items"  value="乒乓球">乒乓球
        <br/>
        <input type="button" name="checkedAllBtn"  value="全选">
        <input type="button" name="checkedNoBtn"  value="全不选">
        <input type="button" name="checkedRevBtn"  value="反选">
        <input type="button" name="sendBtn"  value="提交">
    
    </form>
</body>
</html>